<template>
  <Echart
      :options="options"
      id="bottomLeftChart"
      class="echarts_bottom"
      v-if="pageflag"
  ></Echart>
  <Reacquire v-else @onclick="getData" line-height="200px">
    重新获取
  </Reacquire>
</template>

<script>
import {currentGET} from 'api/modules'
import {graphic} from "echarts";
import * as echarts from "echarts";

let style = {
  fontSize: 24
}

export default {
  data() {
    return {
      myChart: null,
      options: {},
      userOverview: {
        alarmNum: 0,
        offlineNum: 0,
        onlineNum: 0,
        totalNum: 0,
      },
      pageflag: true,
      timer: null,
    };
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    },
  },
  created() {
  },
  mounted() {
    this.getData();
  },
  beforeDestroy() {
    this.clearData();
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    getData() {
      this.pageflag = true;
      currentGET("EEPop").then((res) => {
        if (res.code == 200) {
          console.log("经济教育人口", res);
          this.initData(res.data);
        } else {
          console.log("经济教育人口", res.msg, res.data);
          this.pageflag = false;
          this.$Message.warning(res.msg);
        }
      });
    },
    initData(data) {

      var itemStyle = {
        opacity: 0.8
      };
      var sizeFunction = function (x) {
        var y = Math.sqrt(x / 5e8) + 0.1;
        return y * 200;
      };

      var schema = [
        {name: 'Income', index: 0, text: '地区生产总值', unit: '亿元'},
        {name: 'LifeExpectancy', index: 1, text: '普通高等学校数', unit: '所'},
        {name: 'Population', index: 2, text: '年末常住人口', unit: '万人'},
        {name: 'Country', index: 3, text: '省份', unit: ''}
      ];
      this.options = {
        baseOption: {
          timeline: {
            axisType: 'category',
            orient: 'vertical',
            autoPlay: true,
            inverse: true,
            playInterval: 1000,
            left: null,
            right: 0,
            top: 20,
            bottom: 20,
            width: 55,
            height: null,
            symbol: 'none',
            checkpointStyle: {
              borderWidth: 2
            },
            controlStyle: {
              showNextBtn: false,
              showPrevBtn: false
            },
            data: []
          },
          title: [
            {
              text: data.timeline[0],
              textAlign: 'center',
              left: '80 %',
              top: '0%',
            }
          ],
          tooltip: {
            padding: 5,
            borderWidth: 1,
            formatter: function (obj) {
              var value = obj.value;
              var result = '';
              // 先处理第三个元素
              result += schema[3].text + '：' + value[3];
              if (schema[3].unit !== '') {
                result += schema[3].unit;
              }
              result += '<br>';
              // 再处理其他元素
              for (var i = 0; i < schema.length; i++) {
                if (i !== 3) { // 跳过第三个元素
                  if (schema[i].unit !== '') {
                    result += schema[i].text + '：' + value[i] + schema[i].unit + '<br>';
                  } else {
                    result += schema[i].text + '：' + value[i] + '<br>';
                  }
                }
              }
              return result;
            }
          },

          grid: {
            top: 35,
            containLabel: true,
            left: 0,
            bottom: 32,
            right: 85
          },
          xAxis: {
            type: 'log',
            name: '地区生产总值(亿元)',
            max: 150000,
            min: 200,
            nameGap: 25,
            nameLocation: 'middle',
            nameTextStyle: {
              fontSize: 18
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              formatter: '{value} $'
            }
          },
          yAxis: {
            type: 'value',
            name: '普通高等学校数',
            max: 180,
            nameTextStyle: {
              fontSize: 12
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              formatter: '{value} 所'
            }
          },
          visualMap: [
            {
              show: false,
              dimension: 3,
              categories: data.counties,
              inRange: {
                color: (function () {
                  // 使用箭头函数以确保正确的上下文
                  var colors = this.generateColors(31);
                  return colors.concat(colors);
                }).bind(this)() // 绑定当前组件实例的上下文
              }
            }
          ],
          series: [
            {
              type: 'scatter',
              itemStyle: itemStyle,
              data: data.series[0],
              symbolSize: function (val) {
                return sizeFunction(val[2]);
              }
            }
          ],
          animationDurationUpdate: 1000,
          animationEasingUpdate: 'quinticInOut'
        },
        options: []  // 修复拼写错误
      };

      for (var n = 0; n < data.timeline.length; n++) {
        this.options.baseOption.timeline.data.push(data.timeline[n]);
        this.options.options.push({  // 修复拼写错误
          title: {
            show: true,
            text: data.timeline[n] + ''
          },
          series: {
            name: data.timeline[n],
            type: 'scatter',
            itemStyle: itemStyle,
            data: data.series[n],
            symbolSize: function (val) {
              return sizeFunction(val[2]);
            }
          }
        });
      }

      if (this.myChart) {
        console.log("1111111111",this.myChart);
        this.myChart.setOption(this.options);
      } else {
        this.chartDom = document.getElementById('bottomLeftChart');
        this.myChart = echarts.init(this.chartDom);
        this.myChart.setOption(this.options);
      }
    },
    generateColors(count) {
      var colors = [];
      for (var i = 0; i < count; i++) {
        var hue = (360 / count) * i;
        colors.push('hsl(' + hue + ', 70%, 50%)');
      }
      return colors;
    },
    //轮询
    switper() {
      if (this.timer) {
        return;
      }
      let looper = (a) => {
        this.getData();
      };
      this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
    },
  },
};
</script>

<style lang='scss' scoped>
.user_Overview {
  li {
    flex: 1;

    p {
      text-align: center;
      height: 16px;
      font-size: 16px;
    }

    .user_Overview_nums {
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      font-size: 22px;
      margin: 50px auto 30px;
      background-size: cover;
      background-position: center center;
      position: relative;

      &::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }

      &.bgdonghua::before {
        animation: rotating 14s linear infinite;
      }
    }

    .allnum {
      &::before {
        background-image: url("../../assets/img/left_top_lan.png");
      }
    }

    .online {
      &::before {
        background-image: url("../../assets/img/left_top_lv.png");
      }
    }

    .offline {
      &::before {
        background-image: url("../../assets/img/left_top_huang.png");
      }
    }

    .laramnum {
      &::before {
        background-image: url("../../assets/img/left_top_hong.png");
      }
    }
  }
}
</style>
